<template>
  <n-data-table
    :columns="columns"
    :data="data"
    :pagination="pagination"
    :bordered="false"
  />
  <n-modal
    v-model:show="showModal"
    class="custom-card"
    preset="card"
    :style="bodyStyle"
    title="选择漫画"
    size="huge"
    :bordered="false"
    :segmented="segmented"
  >
    <!-- <template #header-extra>
      噢!
    </template> -->
    
    <n-checkbox-group v-model:value="cartoons">
      <n-scrollbar style="max-height: 360px">
        <n-checkbox v-for="item in allCartoonData" :value="item.cartoonName" :label="item.cartoonName" class="checkbox_item"/>
      </n-scrollbar>
    </n-checkbox-group>
    <template #footer>
      <div style="float: right;">
        <NButton type="tertiary" style="margin-right: 20px;" @click="showModal = false">取消</NButton>
        <NButton strong secondary type="success" @click="addCartoon">确定</NButton>
      </div>
    </template>
  </n-modal>
</template>

<script setup lang='ts'>
import {GetTypeCartoon, SetTypeCartoon, RemoveTypeCartoon, GetAllCartoon} from '../../../api/api'
import { h, onMounted,ref,Ref } from 'vue'
import { NTag, NButton } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'

type Song = {
  cartoonName: string
  description: string
  cartoonState: string
  cartoonTag: string
  cartoonAuthor: string
  updateTime: string
  recommendType: string
}

onMounted(async () => {
  initCartoon()
})

const initCartoon = async () => {
  let cartoonData = await GetTypeCartoon({
    recommendType: props.type
  })
  data.value = cartoonData.cartoonData
  cartoons.value = []
  data.value.forEach(e => {
    cartoons.value.push(e.cartoonName)
  })
}

const props = defineProps({
  type: String
})

var data:Ref<Song[]> = ref([])
var showModal:Ref<boolean> = ref(false)
var allCartoonData:Ref<Song[]> = ref([])
var cartoons:Ref<string[]> = ref([])

const addCartoon = async () => {
  let res = await SetTypeCartoon({
    cartoonName: cartoons.value,
    recommendType: props.type
  })
  if(res.state === "OK"){
    window.$message.success("添加成功！")
    showModal.value = false
    initCartoon()
  }
}

const createColumns = ({
  removeCartoon,
  addCartoon
}: {
  removeCartoon: (row: Song) => void,
  addCartoon: () => void,
}): DataTableColumns<Song> => {
  return [
    {
      title: '漫画名',
      key: 'cartoonName',
    },
    {
      title: '简介',
      key: 'description',
      ellipsis: {
        tooltip: {
          contentStyle: {width:"700px"}
        }
      }
    },
    {
      title: '状态',
      key: 'cartoonState',
    },
    {
      title: '标签',
      key: 'cartoonTag',
      render (row) {
        const tags = row.cartoonTag.split('、').map((tagKey) => {
          return h(
            NTag,
            {
              type: 'info',
              bordered: false,
              round:true,
              style: {"margin-right": "2px"}
            },
            {
              default: () => tagKey
            }
          )
        })
        return tags
      }
    },
    {
      title: '作者',
      key: 'cartoonAuthor',
    },
    {
      title: '更新时间',
      key: 'updateTime',
    },
    {
      title () {
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: 'small',
            type: 'success',
            onClick: () => addCartoon()
          },
          { default: () => '添加+' }
        )
      },
      key: 'removeCartoon',
      render (row) {
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: 'small',
            type: 'error',
            onClick: () => removeCartoon(row)
          },
          { default: () => '移除' }
        )
      }
    },
  ]
}

var columns = createColumns({
  // 移除漫画
  async removeCartoon(row:Song) {
    let res = await RemoveTypeCartoon({
      cartoonName: row.cartoonName,
      recommendType: row.recommendType
    })
    if(res.state === "OK"){
      window.$message.success("移除成功")
      initCartoon()
    }
  },
  async addCartoon() {
    if(allCartoonData.value[0]){
      showModal.value = true
    }else{
      let allCartoon = await GetAllCartoon()
      allCartoonData.value = allCartoon.manhua_list
      showModal.value = true
    }
  }
})

const bodyStyle:object = {
  width: '600px',
  height: '600px'
}

const segmented = {
  content: 'soft',
  footer: 'soft'
} as const
  
const pagination:object = {pageSize:10}

</script>

<style lang='scss' scoped>
  .checkbox_item{
    width: 100%;
    padding: 5px;
  }
  .checkbox_item:hover{
    background-color: #242424;
  }
</style>